<template>
	<view class="wrapper">
		<view class="time-block">
			<view>数据更新时间</view>
			<view>{{updateTime}}</view>
		</view>
		<u-card v-for="(item,index) in dataInfo" :key="index">
			<view class="card-head" slot="head">
				{{item.title}}
			</view>
			<view slot="body">
				<view :class="['card-body',item.hideMore?'limit-height':'']">
					<view class="item-block" v-for="(data,idx) in item.data" :key="idx">
						<block v-if="index === 2">
							<view class="label">{{data[1]}}</view>
							<view class="value">
								<span>{{data[2]}}</span>
							</view>
						</block>
						<block v-else>
							<view class="label">{{data[1]}}</view>
							<view class="value">
								<span>{{data[2]}}</span>
								<span>({{data[3]}})</span>
							</view>
						</block>
					</view>
				</view>
				<block v-if="item.data.length > 6">
					<view class="more-block" v-if="item.hideMore" @click="showMoreParam(index)">
						<view>加载更多</view>
						<u-image src="/static/station_info/more.png" width="32" height="32" />
					</view>
					<view class="more-block" v-if="!item.hideMore" @click="hideMoreParam(index)">
						<view>隐藏更多</view>
						<u-image src="/static/station_info/more.png" style="transform: rotate(180deg)" width="32"
							height="32" />
					</view>
				</block>
			</view>
		</u-card>
	</view>
</template>


<script>
	export default {
		components: {},
		data() {
			return {
				updateTime: null,
				dataInfo: [{
					title: '运行参数',
					data: [],
					hideMore: true
				}, {
					title: '电量参数',
					data: [],
					hideMore: true
				}, {
					title: '告警参数',
					data: [],
					hideMore: true
				}],
				equipmentId: null
			}
		},
		onLoad(options) {
			if (options.equipmentId) this.equipmentId = options.equipmentId
			this.loadDeviceParams()
			this.loadDeviceYm()
			this.loadDeviceYx()
		},
		onPullDownRefresh() {
			this.loadDeviceParams()
			this.loadDeviceYm()
			this.loadDeviceYx()
		},
		methods: {
			// 运行参数=遥测、电量参数=遥脉、告警参数=遥信
			loadDeviceParams() {
				if (this.equipmentId === null) return
				this.$u.api.getDeviceParam({
					equipmentId: this.equipmentId
				}).then(res => {
					this.dataInfo[0].data = res.data
					this.updateTime = this.dataInfo[0].data[0][4]
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			loadDeviceYm() {
				if (this.equipmentId === null) return
				this.$u.api.getDeviceYm({
					equipmentId: this.equipmentId
				}).then(res => {
					this.dataInfo[1].data = res.data
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			loadDeviceYx() {
				if (this.equipmentId === null) return
				this.$u.api.getDeviceYx({
					equipmentId: this.equipmentId
				}).then(res => {
					this.dataInfo[2].data = res.data
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			showMoreParam(index) {
				this.dataInfo[index].hideMore = false
			},
			hideMoreParam(index) {
				this.dataInfo[index].hideMore = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #ebebeb;
	}

	.wrapper {
		padding-top: 30upx;

		.time-block {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin: 40upx;
			margin: 0 30upx;
			padding: 20upx 40upx;
			border-radius: 12upx;
			background-color: #fff;
		}

		.card-head {
			text-align: center;
			font-weight: bold;
		}

		.card-body {
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;
			// align-items: center;
			// justify-items: flex-start;

			.item-block {
				width: 50%;
				height: 80upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30upx;

				.label {
					color: #999;
					font-size: 24upx;
				}

				.value {
					color: #333;
					font-size: 28upx;
					margin-top: 10upx;
				}
			}
		}

		.limit-height {
			max-height: 300upx;
		}

		.more-block {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 24upx;
			padding-top: 24upx;
		}

	}
</style>
